<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">

        /*

            为第一个p标签设置一个背景颜色
            :first-child 可以选中第一个元素
            :last-child  可以选中最后一个元素 原理同 :first-child
            :nth-child  表示可以选中任意位置的元素
                该选择器后面可以指定一个参数，表示可以选中第几个子元素
                even表示偶数
                odd表示奇数

            :first-of-type
            :last-of-type
            :nth-of-type

            和:first-child这些非常相似，只不过:first-child是在所有的子元素排列中中排列，而first-of-type是在当前类型的子元素中排列
        */
        p:first-child {/*即是p元素，又是父元素的第一个子元素*/
            background-color: coral;
        }

        /*即是p元素，又同时是body的第一个子元素*/
        body > p:first-child {
            background-color: red;
        }

        p:nth-child(odd){
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>

    <div>
        <p>我是一个p标签</p><!--它即是p元素，又是父元素的第一个子元素-->
    </div>
</body>
</html>